<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>班级列表</title>
		<script src="../../node_modules/layui/dist/layui.js"></script>
		<script src="../../node_modules/mockjs/dist/mock.js"></script>
		<link rel="stylesheet" type="text/css" href="../../node_modules/layui/dist/css/layui.css" />
		<link rel="stylesheet/less" type="text/css" href="../../src/css/style.less" />
		<script src="../../src/css/less.min.js"></script>
		<script src="../baseUrl.js"></script>
	</head>
	<body>

		<!-- 筛选区 -->
		<form class="layui-form" style="padding: 20px 0 0 10px;" action="" method="">
			<div class="layui-form-item">
				<div class="layui-inline">
					<select name="field" placeholder="筛选字段" lay-verify="">
						<option value="">请选择</option>
						<option value="id">ID</option>
						<option value="className">班级名称</option>
						<option value="classType">班级类型</option>
						<option value="classTeacher">班主任</option>
						<option value="startDate">开始时间</option>
						<option value="endDate">毕业时间</option>
					</select>
				</div>
				<div class="layui-inline">
					<input type="text" name="value" placeholder="筛选值" class="layui-input">
				</div>

				<button type="submit" style="vertical-align: baseline;" lay-filter="search" class="layui-btn">搜索
				</button>
				<button type="button" style="vertical-align: baseline;" lay-filter="add" class="layui-btn">添加
				</button>
			</div>
		</form>

		<!-- 列表 -->
		<table class="layui-hide" id="test" lay-filter="list"></table>
		<!-- 列表操作栏 -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="look">查看</a>
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

		<script>
			const { table, layer, form, $ } = layui;
			const baseTableUrl = `${baseUrl}/api/class/list`
			layui.use(function() {
				table.render({
					elem: '#test',
					id: 'classList',
					url: baseTableUrl,
					cellMinWidth: 80,
					cols: [
						[
							{ field: 'id', width: 80, title: 'ID', sort: true },
							{ field: 'className', title: '班级名称' },
							{ field: 'classType', title: '班级类型' },
							{ field: 'classTeacher', title: '班主任' },
							{ field: 'startDate', title: '开始时间' },
							{ field: 'endDate', title: '毕业时间' },
							{ fixed: 'right', title: '操作', toolbar: '#barDemo', width: 168 }
						]
					],
					response: {
						statusCode: 10000
					},
					page: true,
					parseData: function(res) { //res 即为原始返回的数据
						return {
							"code": res.code, //解析接口状态
							"msg": res.message, //解析提示文本
							"count": res.data.total, //解析数据长度
							"data": res.data.list //解析数据列表
						};
					},
				});
			});
			//将对象转化为键值对的字符串
			function toKVStr(obj) {
				let arr = []
				for (let key in obj) {
					let value = obj[key];
					arr.push(`${key}=${value}`)
				}
				return arr.join('&');
			}
			//监听头部筛选按钮
			form.on('submit(search)', function({ field }) {
				//构造新的带筛选参数的url
				let url = baseTableUrl + '?' + toKVStr(field);
				//调用列表重载函数
				reloadTable({ url }, true)
				return false;
			})
			//监听头部添加按钮
			$('button[lay-filter=add]').click(e => {
				//挂在到当期window上供弹框访问
				classRowData = null;
				//然后弹框
				layer.open({
					type: 2,
					title: '新增班级',
					shadeClose: true,
					shade: 0.8,
					area: ['380px', '400px'],
					content: './tan/classTan.html' //iframe的url
				});
			})



			//初始化相关参数
			//挂在到当前window上供弹框访问的行数据
			var classRowData = null;
			//挂在到当前window上供弹框访问的列表刷新
			var reloadTable = function(options, deep) {
				table.reload('classList', options, deep)
			}


			table.on('tool(list)', param => {
				const { data, event } = param;
				switch (event) {
					case 'look':
						//挂载到父级window,供学生列表访问
						window.parent.classRowData = data;
						location.href = 'studentList.html';
						break;
					case 'edit':
						//挂在到当期window上供弹框访问
						classRowData = data;
						//然后弹框
						layer.open({
							type: 2,
							title: '编辑班级',
							shadeClose: true,
							shade: 0.8,
							area: ['380px', '400px'],
							content: './tan/classTan.html' //iframe的url
						});
						break;
					case 'del':
						fetch(`${baseUrl}/api/class/delete?id=${data.id}`)
						.then(response => response.json())
						.then(data => {
							//吐丝
							layer.msg(data.msg)
							//刷新列表
							reloadTable()
						})
						break;
				}
			})
		</script>
	</body>
</html>
